<template>
    <div>
        <el-form :inline="true" :model="formUser" size="mini">
            <el-form-item label="用户名">
                <el-input v-model="formUser.userName" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item label="充币地址">
                <el-input v-model="formUser.toAddress" placeholder="充币地址"></el-input>
            </el-form-item>
            <el-form-item label="状态">
                <el-select v-model="formUser.status" placeholder="请选择">
                    <el-option
                            v-for="item in statusOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="requestSearchUser">查询</el-button>
            </el-form-item>
        </el-form>
        <el-table
                :data="rechargeListData"
                size="mini"
                style="width: 100%">
            <el-table-column
                    prop="createTime"
                    label="时间"
                    width="140"
            >
            </el-table-column>
            <el-table-column
                    label="用户名"
                    width="180"
            >
                <template slot-scope="scope">
                    <template v-for="(item,key) of userMapData">
                        <template v-if="scope.row.userId == key">
                            <span>{{item}}</span>
                        </template>
                    </template>
                </template>
            </el-table-column>
            <el-table-column
                    prop="coin"
                    label="币种"
                    width="80"
            >
            </el-table-column>
            <el-table-column
                    prop="amount"
                    label="提币数量"
                    width="160"
            >
            </el-table-column>
            <el-table-column
                    prop="targetValue"
                    label="提币地址"
            >
            </el-table-column>
            <el-table-column
                    prop="targetValue"
                    label="TxID"
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="确认状态"
                    width="140"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0">已提交</span>
                    <span v-else-if="scope.row.status == 1">已发送</span>
                    <span v-else-if="scope.row.status == 2">成功</span>
                    <span v-else-if="scope.row.status == 3">失败</span>
                    <span v-else-if="scope.row.status == 4">驳回</span>
                    <span v-else-if="scope.row.status == 5">通过</span>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="total, sizes, prev, pager, next"
                :page-size="pagination.pageSize"
                :total="pagination.total"
                :page-sizes="[10, 50, 100]"
                @size-change="handleSizeChange"
                @current-change="currentChange"
                @prev-click="requestGetRechargeList(pagination.prePage)"
                @next-click="requestGetRechargeList(pagination.nextPage)"
        >
        </el-pagination>
    </div>
</template>

<script>

    let api = '/manager/user_balance_record';

    export default {
        name: "RechargeRecord",
        data() {
            return {
                type: 101,
                rechargeListData: [],
                userMapData:{},
                formUser: {
                    userName: '',
                    toAddress: '',
                    status: ''
                },
                statusOptions: [
                    {label: "全部", value: ""},
                    {label: "已提交", value: 0},
                    {label: "已发送", value: 1},
                    {label: "成功", value: 2},
                    {label: "失败", value: 3},
                    {label: "驳回", value: 4},
                    {label: "通过", value: 5},
                ],
                pagination:{
                    total: 0,
                    pageSize: 10,
                    prePage: 0,
                    pageNum: 1,
                    nextPage: 0,
                }
            }
        },
        mounted() {
            this.requestGetRechargeList(this.pagination.pageNum);
        },
        methods: {
            requestGetRechargeList(page) {
                this.requestAxios.requestCMS('post', api + '/get_list.do', {
                    page: page,
                    size: this.pagination.pageSize,
                    type: this.type,
                    userName: this.formUser.userName,
                    toAddress: this.formUser.toAddress,
                    statusList: this.formUser.status === "" ? [] : [this.formUser.status],
                }, (response) => {
                    // console.log(response);
                    if(response.data){
                        let data = response.data.pageList;
                        this.rechargeListData = data.list;
                        this.userMapData = response.data.userMap;
                        this.pagination.total = data.total;
                        this.pagination.prePage = data.prePage;
                        this.pagination.pageNum = data.pageNum;
                        this.pagination.nextPage = data.nextPage;
                    }else{
                        this.rechargeListData = [];
                        this.pagination.total = 0;
                        this.pagination.prePage = 0;
                        this.pagination.pageNum = 1;
                        this.pagination.nextPage = 0;
                    }
                });
            },

            requestSearchUser() {
                this.requestGetRechargeList(1);
            },

            handleSizeChange(val) {
                this.pagination.pageSize = val;
                this.requestGetRechargeList(this.pagination.pageNum)
            },
            currentChange(page) {
                this.requestGetRechargeList(page)
            }
        }
    }
</script>

<style scoped>

</style>
